<template>
	<view class="emailBox">

	</view>
	<view style="background-color: #F4F6F6;">
		<view style="background-color: #fff;">
			<view class="email-tit">
				【慈铭】广州体育中心体检中心
			</view>
			<view class="email-cont">
				<view>
					小二 15809282910
				</view>
				<view>
					体检中心: 2021-04-12
				</view>
			</view>
		</view>
		<view class="inpBox">
			<label for="inputEmail">邮箱</label>
			<input id="inputEmail" type="email" placeholder="请输入您的个人邮箱" v-model="email">
		</view>
		<button @click="checkEmail">确定发送</button>
		<view class="emailCss">
			<text v-if="emailError">邮箱格式错误</text>
		</view>
		<view class="inforBox" v-if="infor">
			<text>您还没有填写内容</text>
		</view>
		<view class="successBox" v-if="success">
			<text>发送成功</text>
		</view>
		<!-- <u-modal :show="show" :title="title" :content='content'></u-modal>
		<u-button @click="show = true">打开</u-button> -->
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	const email = ref('')
	// // const title = ref('标题')
	// // const content = ref('uview-plus的目标是成为uni-app生态最优秀的UI框架')
	const infor = ref(false)
	const success = ref(false)
	const emailError = ref(false)
	const checkEmail = () => {
		console.log(11222);
		const emailRegex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/

		if (email.value == '') {
			infor.value = true;
			setTimeout(function () {
				infor.value = false;
			}, 1000)
			console.log('您还没有填写');
		} else {
			if (emailRegex.test(email.value)) {
				emailError.value = false;
				success.value = true;
				setTimeout(function () {
					success.value = false;
				}, 900)
				email.value = '';
			} else {
				emailError.value = true;

				setTimeout(function () {
					emailError.value = false;
				}, 2000)
				email.value = '';
			}
		}
	}
</script>

<style lang="less">
	.inforBox {
		width: 400rpx;
		height: 60rpx;
		background-color: #aaa;
		color: #fff;
		position: fixed;
		top: 50%;
		left: 24%;

		text {
			text-align: center;
			padding-left: 76rpx;
			line-height: 60rpx;
		}
	}

	.successBox {
		width: 400rpx;
		height: 60rpx;
		background-color: #8FCDB2;
		color: #fff;
		position: fixed;
		top: 50%;
		left: 24%;

		text {
			text-align: center;
			padding-left: 126rpx;
			line-height: 60rpx;
		}
	}

	.email-tit {
		font-size: 40rpx;
		font-weight: 600;
		margin: 40rpx 0;
	}

	.email-cont {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 25rpx;
		border-top: 2rpx solid #aaa;
	}

	.inpBox {
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
		padding: 40rpx 0 0 40rpx;

		input {
			width: calc(100% - 140rpx);
			margin: 0 0 20rpx 40rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #aaa;
		}
	}

	.emailCss {
		background-color: #fff;
		color: red;
		display: flex;
		justify-content: center;


	}
</style>